{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投票详情 - {{ question.question_text }}</title>
    <link rel="stylesheet" href="{% static 'polls/style.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 悬浮框架 -->
    <div class="floating-frame">
        <h1><i class="fas fa-vote-yea"></i> 投票系统</h1>
        <div class="stats-container">
            <div class="stat-item">
                <i class="fas fa-poll icon"></i>
                <span>当前主题: {{ question.question_text|truncatechars:20 }}</span>
            </div>
            <div class="stat-item">
                <i class="fas fa-users icon"></i>
                <span>总投票数: {{ question.total_votes }}</span>
            </div>
            <div class="stat-item">
                <i class="fas fa-check-circle icon"></i>
                <span>选项: {{ question.choice_set.count }}</span>
            </div>
        </div>
    </div>

    <header>
        <h1>投票详情</h1>
        <a href="{% url 'polls:index' %}" class="btn"><i class="fas fa-arrow-left"></i> 返回首页</a>
    </header>

    <main>
        <h2><i class="fas fa-question-circle"></i> {{ question.question_text }}</h2>
        
        <form action="{% url 'polls:vote' question.id %}" method="post">
            {% csrf_token %}
            <fieldset>
                <legend><i class="fas fa-check-square"></i> 请选择：</legend>
                
                {% if error_message %}
                    <div class="error-message">
                        <i class="fas fa-exclamation-circle"></i> {{ error_message }}
                    </div>
                {% endif %}
                
                {% for choice in question.choice_set.all %}
                    <div class="radio-group">
                        <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}">
                        <label for="choice{{ forloop.counter }}">
                            {{ choice.choice_text }}
                            <span class="vote-count">({{ choice.votes }} 票)</span>
                        </label>
                    </div>
                {% endfor %}
            </fieldset>
            <input type="submit" value="提交投票" class="btn btn-vote">
        </form>
    </main>

    <footer>
        <p>© 2023 投票系统 | 使用Django构建</p>
    </footer>
</body>
</html>